<template>
  <!-- 内容 -->
  <div class="main">
    <div class="container">
      <div class="row">
        <div class="col-8">
          <h6><b class="square"></b> 系统通知</h6>
        </div>
        <div class="col-4 text-right">
          <button type="button" class="btn btn-secondary btn-sm"><router-link to="/notice">返回</router-link></button>
        </div>
      </div>

      <!-- 通知列表 -->
      <ul class="list-unstyled mt-4">
        <li class="media pb-3 pt-3 mb-2" v-for="noticeVo in notices" :key="noticeVo.notice.id">
          <img :src="noticeVo.fromUser.headerUrl" class="mr-4 rounded-circle user-header" alt="系统图标">
          <div class="toast show d-lg-block" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header">
              <strong class="mr-auto">{{ noticeVo.fromUser.username }}</strong>
              <small>{{ noticeVo.notice.createTime }}</small>
              <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="toast-body">
              <span v-if="topic == 'comment'">
                用户
                <i>{{ noticeVo.user.username }}</i>
                评论了你的<b>{{ noticeVo.entityType == 1 ? '帖子' : '回复' }}</b>,
                <router-link class="text-primary" :to="'/discuss/detail/' + noticeVo.postId">点击查看</router-link> !
              </span>
              <span v-else-if="topic == 'like'">
                用户
                <i>{{ noticeVo.user.username }}</i>
                点赞了你的<b>{{ noticeVo.entityType == 1 ? '帖子' : '回复' }}</b>
                <router-link class="text-primary" :to="'/discuss/detail/' + noticeVo.postId">点击查看</router-link> !
              </span>
              <span v-else-if="topic == 'follow'">
                用户
                <i>{{ noticeVo.user.username }}</i>
                关注了你,
                <router-link class="text-primary" :to="'/profile/' + noticeVo.user.id">点击查看</router-link> !
              </span>
            </div>
          </div>
        </li>
      </ul>
      <!-- 分页 -->
      <div class="mt-5" v-if="notices.length > 0">
        <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="pageSizes"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import Notice from '@/api/notice'

const topic = useRoute().params.topic

const notices = ref([])

const small = ref(false)
const background = ref(false)
const disabled = ref(false)

const total = ref(0)
const pageSizes = ref([5, 10, 20, 25])
const currentPage = ref(1)
const pageSize = ref(5)

onMounted(async () => {
  getNotices()
})

const getNotices = async () => {
  Notice.getNotices(topic, currentPage.value, pageSize.value)
  .then(async res => {
    notices.value = res
    getNoticeCount()
  })
}

const getNoticeCount = async () => {
  Notice.getNoticeCount(topic)
  .then(async res => {
    total.value = res
  })
}

const handleSizeChange = async () => {
  getNotices()
}

const handleCurrentChange = async () => {
  getNotices()
}

</script>
